<template>
  <Container>
    <template v-slot:searchForm>
      <div class="searchRow">
        <el-form class="elForm" ref="form" :model="searchFormData" label-width="80px">
          <el-form-item label="功能名称">
            <el-input v-model="searchFormData.funcName" clearable placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select v-model="searchFormData.deviceTypeId" class="w100p" clearable filterable placeholder="请选择设备类型">
              <el-option v-for="item, index in deviceTypeList" :label="item.deviceTypeName" :value="item.deviceTypeId"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="btnList">
          <!-- <el-upload class="upload" action="#" :file-list="fileList" :show-file-list="false" :limit="1" :multiple=false
              :auto-upload="false" :on-change="handleChangeupLoad">
              <el-button type="primary" icon="el-icon-upload2" plain>上传文件</el-button>
            </el-upload> -->
          <el-button type="danger" icon="el-icon-delete" @click="handleClickDel(selectionList)"
            :disabled="selectionList.length == 0" plain>删除</el-button>
          <el-button type="primary" icon="el-icon-upload2" plain @click="dialogVisible_files = true">导入</el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleClickAddEdit('add')"
            plain>添加</el-button>
          <el-button type="primary" icon="el-icon-search" @click="queryTableList" plain>查询</el-button>
        </div>
      </div>
    </template>
    <template v-slot:table>
      <el-table :data="tableData" border height="100%" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" width="55" label="序号">
        </el-table-column>
        <el-table-column label="设备类型" width="200">
          <template slot-scope="scope">
            {{ deviceTypeObj[scope.row.deviceTypeId] || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="paramType" label="参数类型"  width="150">
        </el-table-column>
        <el-table-column prop="dataAddress" label="地址"  width="150">
        </el-table-column>
        <el-table-column prop="funcName" label="功能名称"  width="150">
        </el-table-column>
        <el-table-column prop="dataType" label="数据类型"  width="150">
        </el-table-column>
        <el-table-column prop="privilegeLevel" label="用户权限"  width="150">
        </el-table-column>
        <el-table-column prop="readFlag" label="读写"  width="150">
        </el-table-column>
        <el-table-column prop="section" label="区间" width="150">
        </el-table-column>
        <el-table-column prop="unit" label="单位">
        </el-table-column>
        <el-table-column prop="definition" label="定义"  width="300">
        </el-table-column>
        <el-table-column prop="appDataType" label="APP参数配置类型"  width="400">
        </el-table-column>
        <el-table-column prop="description" label="内容描述" width="200">
        </el-table-column>
        <el-table-column prop="standbyOne" label="备用1" width="200">
        </el-table-column>
        <el-table-column prop="standbyTwo" label="备用2" width="200">
        </el-table-column>
        <el-table-column prop="standbyThree" label="备用3" width="200">
        </el-table-column>
        <el-table-column label="操作" width="150"  fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClickAddEdit('edit', scope.row)">编辑</el-button>
            <el-button type="text" @click="handleClickDel([scope.row])">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <AddEdit :title="'数据项'" @closeDialog="closeDialog" :addEditFlag="addEditFlag" :dialogVisible="dialogVisible"
        :data="formData" :deviceTypeList="deviceTypeList">
      </AddEdit>
      <el-dialog title="导入" :visible.sync="dialogVisible_files" width="30%" :before-close="handleClose">
        <el-form :model="fileForm" label-width="80px">
          <el-form-item label="下载模板">
            <el-button type="text" icon="el-icon-download" plain>
              <a href="./static/参数模板.xlsx" download="参数模板">点击下载</a>
            </el-button>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select class="w100p" v-model="fileForm.deviceTypeId" clearable placeholder="请选择活动区域">
              <el-option v-for="item, index in deviceTypeList" :key="index" :label="item.deviceTypeName"
                :value="item.deviceTypeId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-upload class="upload" action="#" :file-list="fileList" :show-file-list="false" :limit="1"
              :multiple="false" :auto-upload="false" accept=".xls,.xlsx" :on-change="handleChangeupLoad">
              <el-button :disabled="!fileForm.deviceTypeId" type="primary" icon="el-icon-upload2" plain>上传文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-dialog>

    </template>
    <template v-slot:pagination>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page" :page-sizes="[10, 100, 200, 300, 400, 500, 600]" :page-size="size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </template>
  </Container>
</template>

<script>
import Container from "@/components/Container"
import AddEdit from './components/addEdit';
import dataItem from "@/api/dataItem";
import deviceType from "@/api/deviceType"
import files from "@/api/files"
export default {
  components: { Container, AddEdit },
  data() {
    return {
      searchFormData: {},
      fileForm: {},
      deviceTypeFuncId: '',
      fileList: [],
      tableData: [],
      selectionList: [],
      deviceTypeList: [],
      deviceTypeObj: {},
      page: 1,
      size: 100,
      total: 10,
      addEditFlag: 'add',
      dialogVisible: false,
      dialogVisible_files: false,
      filesList: [],
      funcName: '',
      formData: {}
    }
  },
  watch: {},
  mounted() {
    this.queryDeviceTypeList();
  },
  methods: {
    async queryDeviceTypeList() {
      this.deviceTypeList = [];
      this.deviceTypeObj = {};
      let { data } = await deviceType.queryList();
      if (!data || data.length == 0) {
        this.$message.warning('请先创建设备类型')
      } else {
        this.deviceTypeList = data || [];
      }
      this.deviceTypeList.forEach(e => {
        this.deviceTypeObj[e.deviceTypeId] = e.deviceTypeName
      })
      this.queryTableList();
    },
    handleChangeupLoad(file, fileList) {
      if (this.fileForm.deviceTypeId) {
        console.log(fileList)
        let formData = new FormData();
        formData.append("file", file.raw);
        formData.append('fileName', file.name);
        formData.append('deviceTypeId', this.fileForm.deviceTypeId);
        files.importExcel(formData).then(res => {
          if (res.code == 1) {
            this.$message.success('上传成功！')
            this.queryTableList();
            this.closeUpload();
          } else {
            this.$message.success(res.msg || '上传失败！')
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.$message.info('请选择设备类型')
      }
    },
    queryTableList() {
      let params = {
        page: this.page,
        size: this.size,
        condition: {
          ...this.searchFormData
        }
      }
      dataItem.queryPageList(params).then(res => {
        let { data } = res
        this.total = data.total;
        this.tableData = data.list;
      }).catch(err => {
        console.log(err)
      })
    },
    closeDialog() {
      this.dialogVisible = false;
      this.dialogVisible_files = false;
      this.formData = {};
      this.queryTableList();
    },
    handleClickDel(rowList = []) {
      let list = [];
      rowList.forEach(item => {
        list.push(item.dataItemId)
      })
      if (rowList.length == 0) return;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dataItem.delList(list).then(res => {
          if (res.code = 1) {
            this.queryTableList();
            this.$message.success('删除成功')
          } else {
            this.$message.warning('删除失败')
          }
        }).catch(err => {
          this.$message.warning('删除失败')
        })
      }).catch(() => {
        this.$set(this, 'selectionList', [])
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClickAddEdit(flag = 'add', row = {}) {
      this.formData = JSON.parse(JSON.stringify(row));
      this.addEditFlag = flag
      this.dialogVisible = true;
    },
    handleSelectionChange(list = []) {
      this.selectionList = list
    },
    handleSizeChange(size) {
      this.size = size;
      this.queryTableList();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.queryTableList();
    },
    closeUpload() {
      this.dialogVisible_files = false
      this.fileForm = {}
      this.fileList = []
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.closeUpload()
          done();
        })
        .catch(_ => { });
    }
  }
}
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  justify-content: space-between;
  align-self: flex-start;
}

.elForm {
  width: calc(100% - 400px);
  justify-content: flex-start;
  display: flex;
  flex-wrap: wrap;
}

.btnList {
  width: 400px;

  .upload {
    display: inline-block;
    margin-right: 10px;
  }
}
</style>
